<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>线稿图涂色</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <h2>线稿图涂色示例</h2>
    <canvas
      id="myCanvas"
      width="1024"
      height="1536"
    ></canvas>

    <script>
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");

            // 初始化画笔状态
            var painting = false;
            
            // 定义画布尺寸常量
            var CANVAS_WIDTH = 411;
            var CANVAS_HEIGHT = 617;

            // 获取设备像素比
            function getPixelRatio(context) {
              var backingStore = context.backingStorePixelRatio ||
                context.webkitBackingStorePixelRatio ||
                context.mozBackingStorePixelRatio ||
                context.msBackingStorePixelRatio ||
                context.oBackingStorePixelRatio ||
                context.backingStorePixelRatio || 1;

              return (window.devicePixelRatio + 1 || 1) / backingStore;
            };

            var ratio = getPixelRatio(ctx);
            
            // 设置画布尺寸和缩放
            function setupCanvas(canvas, ctx, width, height, ratio) {
                // 设置显示尺寸
                canvas.style.width = width + 'px';
                canvas.style.height = height + 'px';
                
                // 设置实际像素尺寸，乘以ratio保证高清显示
                canvas.width = width * ratio;
                canvas.height = height * ratio;
                
                // 应用缩放比例
                ctx.scale(ratio, ratio);
            }
            
            // 加载图片
            const img = new Image();
            img.crossOrigin = "anonymous"; // 处理跨域问题
            img.src = "./p1.png";

            img.onload = function() {
                // 设置画布尺寸和缩放
                setupCanvas(canvas, ctx, CANVAS_WIDTH, CANVAS_HEIGHT, ratio);
                
                // 绘制图片
                ctx.drawImage(img, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
            };

            canvas.addEventListener("mousedown", startPosition); // 鼠标按下开始绘制
            canvas.addEventListener("mouseup", endPosition); // 鼠标松开停止绘制
            canvas.addEventListener("mousemove", draw); // 鼠标移动时绘制

            // 开始绘画
            function startPosition(e) {
              painting = true;
              draw(e);
            }

            function draw(e) {
              if (!painting) return;
              ctx.lineWidth = 30; // 画笔粗细
              ctx.lineCap = "round"; // 圆形的线条端点
              ctx.strokeStyle = "black"; // 画笔颜色

              // 获取鼠标位置
              var rect = canvas.getBoundingClientRect();
              
              // 由于我们已经使用ctx.scale(ratio, ratio)缩放了上下文
              // 这里只需要计算从客户端坐标到canvas坐标的转换
              // 不需要再乘以ratio
              var x = e.clientX - rect.left;
              var y = e.clientY - rect.top;

              // 绘制线条
              ctx.lineTo(x, y);
              ctx.stroke();
              ctx.beginPath();
              ctx.moveTo(x, y); // 将画笔移动到当前位置
            }

            function endPosition() {
              painting = false;
              ctx.beginPath(); // 停止当前路径
            }
    </script>
  </body>
</html>
